<template>
  <div class="main-view">
    <Row>
      <i-col :xs="24" :sm="24" :md="24" :lg="6" span="6">
        <scatter-view></scatter-view>
      </i-col>
      <i-col :xs="24" :sm="24" :lg="8" span="8">
        <Card class="h-global-overview-card">
          <p class="header" slot="title">
            <Icon type="stats-bars"></Icon>Map
          </p>
          <div ref="ele" class="overview"></div>
        </Card>
      </i-col>
      <i-col :xs="24" :sm="24" :lg="10" span="10">
        <radar></radar>
      </i-col>
    </Row>
    <Row>
      <i-col span="24">
        <timeline></timeline>
      </i-col>
    </Row>
  </div>
</template>

<script>
/* eslint-disable */
const axios = require("axios").default;
import echarts from "echarts";
import ScatterView from "./Scatter";
import Timeline from "./Timeline";
import Radar from "./Radar";
import color from "color";

export default {
  components: {
    ScatterView,
    Timeline,
    Radar
  },
  data() {
    return {
      chart: echarts.init(document.createElement("null")),
      damage_data: {}
    };
  },
  computed: {
    ST_location_id_2_name() {
      return this.$store.getters.ST_location_id_2_name;
    },
    ST_location_id_2_color() {
      return this.$store.getters.ST_location_id_2_color;
    },
    ST_location_id_2_coord() {
      return this.$store.getters.ST_location_id_2_coord;
    },
    location_indexes() {
      return Object.keys(this.ST_location_id_2_name).map(e => Number(e));
    },
    colorChangeLightness() {
      return (hexColor, L) => {
        let c = color(hexColor);
        // debugger;
        let hslc = c.hsl();
        hslc = hslc.lightness(L);
        // debugger
        return hslc.hex();
      };
    }
  },
  watch: {},
  methods: {
    /**
     * @returns {Promise<{ok:Boolean,data:any}>}
     */
    get_geojson() {
      return new Promise(resolve => {
        axios
          .get(
            "http://m.tuniucdn.com/fb2/t1/G4/M00/5D/96/Cii_J1z_pHyIMUjkAAA6VfextV0AAHBrwCR20AAADpt40.json"
          )
          .then(axresp => {
            resolve({
              ok: true,
              data: axresp.data
            });
          })
          .catch(axerr => {
            debugger;
          });
      });
    },
    load_damage_data() {
      return new Promise(resolve => {
        axios
          .get(
            "http://m.tuniucdn.com/fb2/t1/G5/M00/51/00/Cii-tF0QhjmIT3mMAAACNsMtKvsAAXGQgP__aYAAAJa70.json"
          )
          .then(axresp => {
            this.damage_data = axresp.data;
            resolve();
          })
          .catch(axerr => {
            debugger;
            alert(axerr.stack);
          });
      });
    }
  },
  async created() {},
  async mounted() {
    let o_geojson = await this.get_geojson();
    await this.load_damage_data();
    if (o_geojson.ok) {
      // debugger
      for (let i of o_geojson.data.features) {
        i.properties.name = i.properties.Nbrhood;
      }
      this.chart = echarts.init(this.$refs["ele"], "macarons");
      let vue = this;
      echarts.registerMap("St", o_geojson.data);
      let map = echarts.getMap("St");
      let map_datas = this.location_indexes.map(e => {
        return {
          name: this.ST_location_id_2_name[e],
          value: e,
          itemStyle: {
            color: this.ST_location_id_2_color[e]
          },
          label: {
            show: true,
            position: [10, 10],
            backgroundColor: "white" || "transparent" || "#999",
            padding: 2,
            fontSize: 15,
            color: this.ST_location_id_2_color[e],
            textBorderColor: "black",
            textBorderWidth: 1,
            textShadowBlur: 1,
            textShadowColor: "white",
            formatter: "{@score} - {b}"
          }
        };
      });
      // let 
      var option = {
        // legend: {
        //   type: "scroll",
        //   orient: "vertical",
        //   left: 10,
        //   top: 20,
        //   bottom: 20,
        //   data: Object.values(this.ST_location_id_2_name)
        // },
        backgroundColor: "#9494fe",
        visualMap: {
          min: 1,
          max: 6,
          // splitNumber: 2,
          inRange: {
            color: ["green", "yellow", "red"]
          },
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          // {
          //   roam: true,
          //   // map: "St",
          //   geoIndex: 0,
          //   scaleLimit: {
          //     min: 0.7,
          //     max: 20
          //   },
          //   // geoIndex:0,
          //   type: "map",
          //   data: map_datas,
          //   tooltip: {},
          //   aspectScale: 1.0 //长宽比. 默认是: 0.75，所以地图变形
          // }
          {
            type: "heatmap",
            coordinateSystem: "geo",
             blurSize:30,
            geoIndex: 0,
            data: this.location_indexes.map(e => {
              // debugger
              let coord = this.ST_location_id_2_coord[e];
              let value = this.damage_data[e];
              console.log(e, [coord[0], coord[1], value]);
              return [coord[0], coord[1], value];
            }).concat([
              // [-13353294, 19069,10],
              // [-13349093, 19991,10]
            ])
          }
        ],
        geo: {
          roam: true,
          map: "St",
          aspectScale: 1.1,
          zoom: 1.0,
          label: {
            show: true
            // position: "bottom",
            // align: "right",
            // rotate: 45,
            // color:"#FF0080",
            // offset:[300,30],
            // backgroundColor:"black"
          },
          regions: this.location_indexes.map(e => {
            return {
              name: this.ST_location_id_2_name[e],
              itemStyle: {
                // color: this.colorChangeLightness(this.ST_location_id_2_color[e],45),
                borderColor: this.ST_location_id_2_color[e]
                // borderColor: "#000"
              },
              label: {
                show: true,
                position: [10, 10],
                backgroundColor: "white" || "transparent" || "#999",
                padding: 2,
                fontSize: 17,
                color: this.ST_location_id_2_color[e],
                textBorderColor: "black",
                textBorderWidth: 0,
                textShadowBlur: 1,
                textShadowColor: "black",
                formatter: function(a, b) {
                  debugger;
                  return "0";
                }
              },
              emphasis: {
                itemStyle: {
                  color: this.ST_location_id_2_color[e]
                },
                label: {
                  color: this.ST_location_id_2_color[e]
                }
              }
            };
          })
        }
      };
      // debugger
      this.chart.setOption(option);
    }
  }
};
</script>

<style lang="less">
.main-view {
  .overview {
    // width: 100%;
    height: 500px;
  }
}
</style>
